<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动的小盒子</title>
		<style type="text/css">
			#div{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				position: absolute;
			}
			button{
				position: relative;
				top: 120px;
			}
		</style>
	</head>
	<body>
		<div id="div">
			
		</div>
		<button type="button">点击开始</button>
		<button type="button">点击停止</button>
		<script type="text/javascript">
			var btns = document.getElementsByTagName('button');
			var div = document.getElementById('div');
			var body = document.body;
			var timer = null;
			var num = 0 ;
			btns[0].onclick = function(){
					
				if(timer == null){
					timer = setInterval(()=>{
						num+=5;
						div.style.left = num+'px';
						if(num >=body.offsetWidth-div.offsetWidth){
							alert(1);
						}
					},1000);
				}
			
			}
			btns[1].onclick = function(){
				clearInterval(timer);
			}
		</script>
	</body>
</html>
